<template>
  <a-card :bordered="false" class="card">
    <div class="table-operator">
      <a-button v-has="'customer:addLabourDistribute'" @click="addLabourDistribute" type="primary" icon="plus">新增</a-button>
    </div>
    <div style="height:calc(100vh - 220px);overflow-y:scroll;">
      <!-- <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="appointWorker(record)" v-has="'customer:appointWorker'" v-if="[1,9].includes(record.labourStatus)">指派</a>
          <a-divider type="vertical" v-has="'customer:appointWorker'" v-if="[1,9].includes(record.labourStatus)"/>

          <a @click="distribute(record)" v-has="'customer:distribute'" v-if="[1,9].includes(record.labourStatus)">派发</a>
          <a-divider type="vertical" v-has="'customer:distribute'" v-if="[1,9].includes(record.labourStatus)"/>

          <a @click="stopAppoint(record)" v-has="'customer:stopAppoint'" v-if="record.labourStatus === 3">停止派发</a>
          <a-divider type="vertical" v-has="'customer:stopAppoint'" v-if="record.labourStatus === 3"/>

          <a @click="editLabour(record)" v-has="'customer:editLabour'" v-if="[1,9,10].includes(record.labourStatus)">编辑</a>
          <a-divider type="vertical" v-has="'customer:editLabour'" v-if="[1,9,10].includes(record.labourStatus)"/>

          <a-popconfirm v-has="'customer:confirmLabour'" title="是否对该劳务进行确认?" @confirm="() => confirmLabour(record)">
            <a v-if="record.labourStatus === 5">确认劳务</a>
            <a-divider type="vertical" v-if="record.labourStatus === 5"/>
          </a-popconfirm>

          <a @click="rejectLabour(record)" v-has="'customer:rejectLabour'" v-if="record.labourStatus === 5">驳回</a>
          <a-divider type="vertical" v-has="'customer:rejectLabour'" v-if="record.labourStatus === 5"/>

          <a @click="rejectLabourDetail(record)" v-if="record.labourStatus === 8">驳回详情</a>
          <a-divider type="vertical" v-if="record.labourStatus === 8"/>

          <a @click="labourDistributeDetail(record)">劳务详情</a>

          <a-divider type="vertical" v-has="'customer:delLabour'" v-if="[1,9,10].includes(record.labourStatus)"/>
          <a-popconfirm title="确定删除吗?" v-has="'customer:delLabour'" @confirm="() => handleDelete(record.id)">
            <a v-if="[1,9,10].includes(record.labourStatus)">删除</a>
          </a-popconfirm>
        </span>
      </a-table> -->

      <van-list
        v-model="loading"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="downLoadData"
        :immediate-check="false">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item 
            :title="item.labourTypeText" 
            :name="i"
            v-for="(item,i) in dataSource"
            :key="i">
            <div class="list">
              <div>劳务类型：{{ item.labourTypeText }}</div>
              <div>劳务金额：{{ item.labourMoney }}</div>
              <div>项目地址：{{item.projectAddress}}</div>
              <div>劳务开始时间：{{item.labourBeginTime}}</div>
              <div>劳务结束时间：{{item.labourEndTime}}</div>
              <div>工期/天：{{item.workDeadline}}</div>
              <div>是否结算：{{item.isBalanceAccounts==0?'已结算':'未结算'}}</div>
              <div>劳务状态：{{item.labourStatusText}}</div>
              <div>备注：{{item.remarks}}</div>
              <div>操作：
                <span>
                  <a @click="appointWorker(item)" v-has="'customer:appointWorker'" v-if="[1,9].includes(item.labourStatus)">指派</a>
                  
                  <a-divider type="vertical" v-has="'customer:appointWorker'" v-if="[1,9].includes(item.labourStatus)"/>

                  <a @click="distribute(item)" v-has="'customer:distribute'" v-if="[1,9].includes(item.labourStatus)">派发</a>
                  <a-divider type="vertical" v-has="'customer:distribute'" v-if="[1,9].includes(item.labourStatus)"/>

                  <a @click="stopAppoint(item)" v-has="'customer:stopAppoint'" v-if="item.labourStatus === 3">停止派发</a>
                  <a-divider type="vertical" v-has="'customer:stopAppoint'" v-if="item.labourStatus === 3"/>

                  <a @click="editLabour(item)" v-has="'customer:editLabour'" v-if="[1,9,10].includes(item.labourStatus)">编辑</a>
                  <a-divider type="vertical" v-has="'customer:editLabour'" v-if="[1,9,10].includes(item.labourStatus)"/>

                  <a-popconfirm v-has="'customer:confirmLabour'" title="是否对该劳务进行确认?" @confirm="() => confirmLabour(item)">
                    <a v-if="item.labourStatus === 5">确认劳务</a>
                    <a-divider type="vertical" v-if="item.labourStatus === 5"/>
                  </a-popconfirm>

                  <a @click="rejectLabour(item)" v-has="'customer:rejectLabour'" v-if="item.labourStatus === 5">驳回</a>
                  <a-divider type="vertical" v-has="'customer:rejectLabour'" v-if="item.labourStatus === 5"/>

                  <a @click="rejectLabourDetail(item)" v-if="item.labourStatus === 8">驳回详情</a>
                  <a-divider type="vertical" v-if="item.labourStatus === 8"/>

                  <a @click="labourDistributeDetail(item)">劳务详情</a>

                  <a-divider type="vertical" v-has="'customer:delLabour'" v-if="[1,9,10].includes(item.labourStatus)"/>
                  <a-popconfirm title="确定删除吗?" v-has="'customer:delLabour'" @confirm="() => handleDelete(item.id)">
                    <a v-if="[1,9,10].includes(item.labourStatus)">删除</a>
                  </a-popconfirm>
                </span>
              </div>
            </div>


         
           
          </van-collapse-item>
        </van-collapse>
      </van-list>
    </div>

    <a-drawer
      title="驳回记录"
      placement="right"
      width="100%"
      :closable="true"
      :visible="visible"
      @close="onClose">
      <a-timeline style="margin-top: 10px">
        <a-timeline-item v-for="(item,index) in this.rejectLabourList" :key="index" >
          <a-card  :title="'驳回时间：'+item.createTime" style="width: 100%">
            <div>
              <span>驳回原因：{{item.rejectCause}}</span><br>
              <span v-if="item.rejectImage!=null && item.rejectImage!=''">
                驳回图片：<img style="width: 100px;height: 100px;margin-right: 10px" @click="imageDetail(item.rejectImageArr, imgIndex)" v-for="(img,imgIndex) in item.rejectImageArr" :key="imgIndex" :src="img">
              </span>
              <span v-if="item.rejectImage == null || item.rejectImage == ''">
                驳回图片：无
              </span>
            </div>
          </a-card>
        </a-timeline-item>
      </a-timeline>
    </a-drawer>





    <add-labour-distribute-modal ref="addLabourDistributeModal" @ok="modalFormOk"></add-labour-distribute-modal>
    <labour-distribute-detail-modal ref="labourDistributeDetailModal"></labour-distribute-detail-modal>
    <appoint-worker-modal ref="AppointWorkerModal" @selectFinished="selectOK"></appoint-worker-modal>
    <reject-labour-modal ref="rejectLabourModal" @ok="modalFormOk"></reject-labour-modal>
  </a-card>
</template>

<script>
  import { filterObj } from '@/utils/util';
  import { postAction,getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {filterDictTextByCache} from '@comp/dict/JDictSelectUtil'
  import addLabourDistributeModal from "./modules/addLabourDistributeModal";
  import labourDistributeDetailModal from "./modules/labourDistributeDetailModal";
  import rejectLabourModal from "./modules/rejectLabourModal";
  import AppointWorkerModal from "./modules/appointWorkerModal";
  import { ImagePreview } from 'vant';
  export default {
    name: 'labourDistribute',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      AppointWorkerModal,
      addLabourDistributeModal,labourDistributeDetailModal,rejectLabourModal
    },
    props: {
      customerId: {
        required: true,
        default: 0
      },
    },
    data () {
      return {
        finished: false,
        activeName: '',
        queryParam: {},
        visible: false,

        dataSource:[],
        rejectLabourList:[],
        currentId: 0,   //当前劳务id
        description: '客户劳务派发表管理页面',
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'劳务类型',
            align:"center",
            dataIndex: 'labourType',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('customer_labour_distribute_labour_type', text);
            }
          },
          {
            title:'劳务金额',
            align:"center",
            dataIndex: 'labourMoney'
          },
          {
            title:'项目地址',
            align:"center",
            dataIndex: 'projectAddress'
          },
          {
            title:'劳务开始时间',
            align:"center",
            dataIndex: 'labourBeginTime'
          },
          {
            title:'劳务结束时间',
            align:"center",
            dataIndex: 'labourEndTime'
          },
          {
            title:'工期/天',
            align:"center",
            dataIndex: 'workDeadline'
          },
          {
            title:'是否结算',
            align:"center",
            dataIndex: 'isBalanceAccounts',
            customRender:function (text) {
              return text==0?"已结算":"未结算"
            }
          },
          {
            title:'劳务状态',
            align:"center",
            dataIndex: 'labourStatus',
            customRender: (text) => {
              //字典值翻译通用方法
              return filterDictTextByCache('customer_labour_distribute_labour_status', text);
            }
          },
          {
            title:'备注',
            align:"center",
            dataIndex: 'remarks'
          },

          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],

        url: {
          list: "/ghCustomerLabourDistribute/list",
          delete: "/ghCustomerLabourDistribute/delete",
          deleteBatch: "/ghCustomerLabourDistribute/deleteBatch",
          exportXlsUrl: "/ghCustomerLabourDistribute/exportXls",
          importExcelUrl: "/ghCustomerLabourDistribute/importExcel",
          edit: "/ghCustomerLabourDistribute/edit",

          rejectLabourList: "/ghCustomerLabourDistributeReject/list",
        },
        dictOptions:{},
      }
    },
    created() {
      // this.loadData();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      downLoadData(){
        this.ipagination.current++;
        this.finished = false
        this.loadData()
      },
      rejectLabour(record){
        this.$refs.rejectLabourModal.currentId = this.customerId;
        this.$refs.rejectLabourModal.labourId = record.id;
        this.$refs.rejectLabourModal.visible = true
        this.$refs.rejectLabourModal.title = "驳回";
      },
      rejectLabourDetail(record){
        this.visible = true;
        this.getRejectLabourList(record.id);
      },
      //查询驳回列表
      getRejectLabourList(labourId) {
        getAction(this.url.rejectLabourList,{
          labourId: labourId,
        }).then((res)=>{
          if (res.success){
            this.rejectLabourList = res.result;
          }
        })
      },
      imageDetail(list, i){
        ImagePreview({
          images: list,
          startPosition: i,
        })
      },
      //确认劳务
      confirmLabour(record){
        postAction(this.url.edit, {
          id: record.id,
          labourStatus: 6,
          customerId: record.customerId
        }).then((res) => {
          if (res.success) {
            this.$message.success("操作成功")
            this.loadData(1);
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //派发
      distribute(record){
        postAction(this.url.edit, {
          id: record.id,
          labourStatus: 3
        }).then((res) => {
          if (res.success) {
            this.$message.success("已派发")
            this.loadData(1);
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //停止派发
      stopAppoint(record){
        postAction(this.url.edit, {
          id: record.id,
          labourStatus: 9
        }).then((res) => {
          if (res.success) {
            this.$message.success("操作成功")
            this.loadData(1);
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      //指派工人
      appointWorker(record){
        this.currentId = record.id;
        this.$refs.AppointWorkerModal.onClearSelected();
        this.$refs.AppointWorkerModal.visible = true
        this.$refs.AppointWorkerModal.title = "指派工人";
      },
      selectOK(data) {
        postAction(this.url.edit, {
          id: this.currentId,
          workerId: data.id,
          workName: data.workerName,
          workPhone: data.workerPhone,
          labourStatus: 5
        }).then((res) => {
          if (res.success) {
            this.$message.success("指派成功")
            this.loadData(1);
          } else {
            this.$message.warning(res.message)
          }
        })
      },
      labourDistributeDetail(record){
        this.$refs.labourDistributeDetailModal.model = record;
        this.$refs.labourDistributeDetailModal.visible = true;
        this.$refs.labourDistributeDetailModal.title = "劳务详情";
      },
      addLabourDistribute(){
        this.$refs.addLabourDistributeModal.add(this.customerId);
        this.$refs.addLabourDistributeModal.title = "添加劳务";
      },
      editLabour(record){
        this.$refs.addLabourDistributeModal.edit(record);
        this.$refs.addLabourDistributeModal.title = "编辑劳务";
      },
      modalFormOk(){
        this.loadData(1);
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }

        if (arg === 1) {
          this.ipagination.current = 1;
          this.dataSource = []
        }

        let params = this.getQueryParams();
        params.customerId = this.customerId
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            let list = res.result.records||res.result;
            this.dataSource = [...this.dataSource, ...list]

            for(let i=0;i<this.dataSource.length;i++){
              this.dataSource[i].labourTypeText = filterDictTextByCache('customer_labour_distribute_labour_type', this.dataSource[i].labourType);
              this.dataSource[i].labourStatusText = filterDictTextByCache('customer_labour_distribute_labour_type', this.dataSource[i].labourStatus);
            }

            this.ipagination.total = res.result.total;

            this.loading = false
            if(list.length<10){
              this.finished = true;
            }
          }else{
            this.$message.warning(res.message)
            this.finished = true;
          }
        }).finally(() => {
          this.loading = false
        })
      },
      getQueryParams() {
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        let param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        return filterObj(param);
      },
      getQueryField() {
        let str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .card /deep/ .ant-card-body{
    padding: 24px 10px !important;
  }
  .list{
    line-height: 30px;
    border-top: 1px solid #f6f6f6;
    font-size: 12px;
  }
</style>